<template >
	<!-- eslint-disable vue/nkeyo-mutating-props  -->
	<el-table
		v-loading="loading"
		:data="source"
		border
		:height="tableHeight"
		ref="recordTable"
		v-tableAutoHeight:[tableHeight]="125"
		:key="reloadKey"
	>
		<el-table-column label="选择框" type="selection" fixed></el-table-column>
		<el-table-column label="序号" type="index" width="50" fixed align="center"></el-table-column>
		<slot :name="item.key" v-for="(item, index) in schema" :key="index" v-bind:data="{ source, item }">
			<el-table-column :label="item.value" :prop="item.key" align="center">
				<template #default="scope"> {{ handleNullColumn(scope) }} </template>
			</el-table-column>
		</slot>
		<el-table-column label="操作" width="150" fixed="right" align="center">
			<template #default="scope">
				<el-button size="mini" @click="rowEdit(scope.$index, scope.row)"> 编辑 </el-button>
				<el-popconfirm title="确定删除吗？" @confirm="rowDelete(scope.$index, scope.row)">
					<template #reference>
						<el-button size="mini" type="danger"> 删除 </el-button>
					</template>
				</el-popconfirm>
			</template>
		</el-table-column>
	</el-table>
</template>
<script>
export default {
	name: 'AutoForm',
	props: {
		schema: { type: Object },
		source: { type: Object },
		rowEdit: {
			type: Function,
			null: true,
		},
		rowDelete: {
			type: Function,
			null: true,
		},
		loading: {
			type: Boolean,
			null: false,
		},
	},
	data() {
		return {
			// 用于自动设置表格高度
			tableHeight: 100,
			reloadKey: 1,
		}
	},
	mounted() {
		this.autoHeightHandle()
	},
	methods: {
		handleNullColumn(data) {
			let prop = data.column.property
			let value = data.row[prop]
			if (value == null) {
				return '--空--'
			}
			return value
		},
		autoHeightHandle() {
			// 自动设置表格的高度
			let el = this.$refs.recordTable.$el
			let clientHeight = document.body.clientHeight
			let elOffsetTop = el.offsetTop
			let height_the_left = clientHeight - elOffsetTop
			let elH = height_the_left - 145
			el.style = `height:calc(${elH}px - 2rem);overflow-y:auto;`
			this.tableHeight = elH - 12
			this.reloadKey++
			this.$refs.recordTable.doLayout()
		},
		formItemlabel(label) {
			return label + ':'
		},
		componentName(key) {
			switch (key) {
				case 'string':
					return 'el-input'
				case 'text':
					return 'el-input'
				case 'number':
					return 'el-input-number'
				case 'boolean':
					return 'el-switch'
				case 'select':
					return 'AutoFormSelect'
				case 'datetime':
					return 'el-date-picker'
				case 'time':
					return 'el-time-picker'
				case 'date':
					return 'el-date-picker'
				default:
					return 'el-input'
			}
		},
		handleProp(type, props, propertie) {
			var _props = {}
			// _props.size = 'small'
			_props.style = { width: this.formItemWidth }
			_props.placeholder = '请输入' + propertie.label
			if (type === 'select') _props.placeholder = '请选择' + propertie.label
			switch (type) {
				case 'text':
					_props.type = 'textarea'
					break
				case 'datetime':
					_props.type = 'datetime'
					break
				case 'date':
					_props.type = 'date'
					break
				// case 'number':
				// 	_props.style = { width: '100%' }
				// 	break
			}
			Object.assign(_props, props)
			return _props
		},
	},
}
</script>
<style lang='scss' scoped>
</style>